import React, { useEffect, useRef } from "react"
import {
    Chart,
    Interval,
    Tooltip,
    Axis,
    Coordinate,
    Interaction,
    getTheme
} from 'bizcharts';

interface PieChartProps {
    data: { item: string; count: number; percent: number; }[];
    pure: boolean;
}

export default function PieChart(props: PieChartProps) {

    const cols = {
        percent: {
            formatter: val => {
                val = val * 100 + '%';
                return val;
            },
        },
    };

    const data = props.data;

    return (
        <Chart height={400} data={data} scale={cols} autoFit pure={props.pure}>
            <Tooltip showTitle={false} />
            <Axis visible={false} />
            <Coordinate type="theta" radius={0.75} />
            <Interval
                position="percent"
                adjust="stack"
                color="item"
                style={{
                    lineWidth: 1,
                    stroke: '#fff',
                }}
                label={['count', {
                    content: (data) => {
                        return `${data.item}: ${data.percent * 100}%`;
                    },
                }]}
                state={{
                    selected: {
                        style: (t) => {
                            const res = getTheme().geometries.interval.rect.selected.style(t);
                            return { ...res, fill: 'red' }
                        }
                    }
                }}
            />
            <Interaction type='element-single-selected' />
        </Chart>

    );


}

